<template>
  <div class="page">
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000">
        <van-swipe-item v-for="(item, index) in pics" :key="index">
          <img :src="item" alt="" @click="swiperAction(index)" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <van-grid :column-num="2" class="operator" direction="horizontal" :border="false">
      <van-grid-item v-for="(item, index) in operator" :key="index" class="border-right"
        @click="operatorAciton(item.text, index)">
        <div class="filePic" :style="{ backgroundImage: 'url(' + item.bgi + ')' }">
          <img :src="item.src" alt="" />
        </div>
        <span>{{ item.text }}</span>
      </van-grid-item>
    </van-grid>
    <div class="type">
      <van-swipe class="my-swipe">
        <van-swipe-item class="firstType">
          <div class="typeItem" v-for="(item, index) in type1" :key="index" @click="type1Action(index)">
            <div :style="{ backgroundImage: 'url(' + item.bgi + ')' }">
              <img :src="item.img1" alt="" />
              <img :src="item.img2" alt="" v-if="item.img2" />
            </div>
            <span>{{ item.text }}</span>
          </div>
        </van-swipe-item>
        <van-swipe-item class="secondType">
          <div class="typeItem" v-for="(item, index) in type2" :key="index" @click="type2Action(item.text, index)">
            <div :style="{ backgroundImage: 'url(' + item.bgi + ')' }">
              <img :src="item.img" alt="" />
            </div>
            <span>{{ item.text }}</span>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <van-grid :column-num="2" class="section" direction="horizontal" :border="false">
      <van-grid-item v-for="(item, index) in section" :key="index" class="border-right"
        @click="sectionAction(item.text, index)">
        <span>{{ item.text }}</span>
        <img :src="item.img" alt="" />
      </van-grid-item>
    </van-grid>
    <div class="doctor">
      <h2>推荐医生</h2>
      <div class="doctorRec">
        <div v-for="(item, index) in doctor" :key="index" :class="{ 'border-bottom': item.border }"
          @click="doctorAction(item.name, item.img, item.job, item.able, index)">
          <img :src="item.img" alt="" />
          <p>
            <span>{{ item.name }}</span><span>{{ item.job }}</span><br />
            {{ item.able }}
          </p>
        </div>
      </div>
    </div>
    <div class="health">
      <div class="healthTitle">
        <h2 ref="more">健康百科</h2>
        <span class="more" @click="getmoreAction">更多 》</span>
      </div>
      <div class="healthContent">
        <div v-for="(item, index) in health" :key="index" @click="healthAciton(item._id)">
          <img :src="item.img" alt="" />
          <span>{{ item.title }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swipe, SwipeItem, Grid, GridItem } from "vant";
import { postArticle } from "../../api/article";
export default {
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
  },
  data() {
    return {
      pics: [
        "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u123.png",
        "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u126.png",
        "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u122.png",
        "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u127.png",
      ],
      operator: [
        {
          src: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u191.png",
          bgi: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u190.png",
          text: "自助建档",
        },
        {
          src: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u196.png",
          bgi: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u195.png",
          text: "预约挂号",
        },
      ],
      type1: [
        {
          img1: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u208.png",
          img2: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u209.png",
          bgi: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u207.png",
          text: "自助缴费",
        },
        {
          img1: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u225.png",
          bgi: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u190.png",
          text: "门诊报到",
        },
        {
          img1: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u202.png",
          bgi: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u201.png",
          text: "智能导诊",
        },
        {
          img1: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u213.png",
          bgi: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u211.png",
          text: "候诊查询",
        },
        {
          img1: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u217.png",
          bgi: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u215.png",
          text: "检查预约",
        },
        {
          img1: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u221.png",
          bgi: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u219.png",
          text: "检验预约",
        },
      ],
      type2: [
        {
          img: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u245.png",
          bgi: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u219.png",
          text: "住院服务",
        },
        {
          img: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u241.png",
          bgi: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u240.png",
          text: "处方查询",
        },
        {
          img: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u213.png",
          bgi: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u211.png",
          text: "线上咨询",
        },
        {
          img: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u233.png",
          bgi: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u215.png",
          text: "体检中心",
        },
        {
          img: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u237.png",
          bgi: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u236.png",
          text: "就诊指南",
        },
      ],
      section: [
        {
          img: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u184.png",
          text: "科室导航",
        },
        {
          img: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u139.png",
          text: "医院介绍",
        },
      ],
      doctor: [
        {
          img: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u154.png",
          name: "杨爱明",
          job: "主任医师  消化内科",
          able: "擅长 : 食管胃底静脉曲张，胃早期癌，胆石症，胰腺癌，慢性胰腺炎，胆管癌，ERCP，超声内镜",
          border: true,
        },
        {
          img: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u156.png",
          name: "李单青",
          job: "主任医师  胸外科",
          able: " 擅长 ：肺部肿瘤、食管癌、胃贲门癌、各种食管良性病变、纵隔良恶性肿瘤",
          border: true,
        },
        {
          img: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u168.png",
          name: "李莹",
          job: "主任医师  眼科",
          able: "擅长 : 近视手术、角膜移植手术，角膜紫外交联手术。各种激光屈光手术后并发症，难治角膜病",
          border: false,
        },
      ],
      health: [
        // {
        //   img: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u170.png",
        //   text: "冠心病和高血压的相爱相杀",
        // },
        // {
        //   img: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u173.png",
        //   text: "你的腰老了，并不仅仅是因为久坐，站着也有错！",
        // },
        // {
        //   img: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u176.png",
        //   text: "“腹愁者”，直接切胃行不行",
        // },
        // {
        //   img: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u179.png",
        //   text: "不要让孩子的身高输在青春期！",
        // },
      ],
    };
  },
  watch: {
    $route() {
      this.requestData();
    },
  },
  methods: {
    swiperAction(index) {
      console.log(index);
    },
    // 自助和预约
    operatorAciton(text, index) {
      console.log("自助和预约", text, index);
      // 预约挂号
      if (index == 1) {
        this.$router.push({ name: "RegistrationNotice", params: { text } });
      } else if (index == 0) {
        this.$router.push({ name: "FilingInstructions", params: { text } });
      }
    },
    type1Action(index) {
      console.log(index);
    },
    type2Action(text, index) {
      if (index == 4) {
        this.$router.push({ name: "sultation", params: { text } });
      }
    },
    sectionAction(text, index) {
      console.log(index);
      if (index) {
        this.$router.push({ name: "production", params: { text } });
      } else {
        this.$router.push({ name: "navigation", params: { text } });
      }
    },
    doctorAction(text, img, job, able, index) {
      console.log(index);
      let space = job.indexOf(" ");
      let job1 = job.slice(0, space);
      let job2 = job.slice(space + 1);
      this.$router.push({
        name: "doctor",
        params: { text, img, job1, job2, able },
      });
    },

    //获取文章列表
    async requestData() {
      const { data } = await postArticle();
      // console.log(data);
      this.health = data.datas.slice(0, 4);
      // console.log(this.health);
    },
    // 跳转详情页
    healthAciton(id) {
      this.$router.push({
        name: "newsinfo",
        params: { text: "文案详情", id },
      });
    },
    getmoreAction() {
      // console.log(this.$refs.more.innerHTML);
      this.$router.push({
        name: "more",
        params: { text: this.$refs.more.innerHTML },
      });
    },
  },

  mounted() {
    this.requestData();
  },
};
</script>

<style scope lang="scss">
@function vw($px) {
  @return ($px/375) * 100vw;
}

* {
  margin: 0;
  padding: 0;
}

.page {
  overflow: auto;
  position: absolute;
  height: 100%;
  background-color: rgba(242, 242, 242, 1);

  &::-webkit-scrollbar {
    display: none;
  }

  .swiper .my-swipe {
    width: 100%;
    height: vw(200);
    background: #fff;

    .van-swipe-item {
      color: #fff;
      text-align: center;
    }

    .van-swipe-item img {
      width: 100%;
      height: 90%;
    }

    .van-swipe__indicators {
      bottom: vw(6);
    }

    .van-swipe__indicator {
      background-color: rgb(60, 60, 60) !important;
    }

    .van-swipe__indicator--active {
      background-color: rgb(0, 183, 93) !important;
    }
  }

  .operator {
    margin-top: vw(10);
    height: vw(65);
    background: #fff;

    span {
      margin-left: vw(10);
      font-size: vw(14);
      color: #333;
    }

    img {
      width: vw(22);
      height: vw(20);
    }

    .van-grid-item {
      display: flex;
      align-items: center;
      height: 100%;
      width: 50%;
    }

    .filePic {
      margin-left: vw(10);
      display: flex;
      align-items: center;
      justify-content: center;
      width: vw(40);
      height: vw(40);
      border-radius: 50%;
      overflow: hidden;
      background-repeat: no-repeat;
      background-size: contain;
    }
  }

  .type .my-swipe {
    .firstType .typeItem:first-child div {
      position: relative;
    }

    .firstType .typeItem:first-child div img:nth-child(2) {
      position: absolute;
      width: vw(10);
      height: vw(10);
    }

    .van-swipe__indicators {
      bottom: vw(6);
    }

    .van-swipe__indicator {
      background-color: rgb(60, 60, 60);
    }

    .van-swipe__indicator--active {
      background-color: rgb(0, 183, 93) !important;
    }

    .van-swipe-item {
      height: vw(220);
      margin-top: vw(10);
      background-color: #fff;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 1fr);

      .typeItem {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        div {
          display: flex;
          align-items: center;
          justify-content: center;
          width: vw(50);
          height: vw(50);
          border-radius: 50%;
          overflow: hidden;
          background-size: contain;
        }

        img {
          width: vw(22);
          height: vw(24);
        }

        span {
          margin-top: vw(3);
        }
      }
    }
  }

  .section {
    margin-top: vw(10);
    height: vw(65);
    background: #fff;
    display: flex;
    align-items: center;

    img {
      margin-left: vw(20);
      width: vw(24);
      height: vw(30);
    }
  }

  .doctor {
    margin-top: vw(10);
    padding: vw(10) vw(10) 0 vw(10);
    height: vw(300);
    background: #fff;
    text-align: left;

    h2 {
      font-weight: 400;
      font-size: vw(14);
      color: #333;
      margin: 0;
    }

    .doctorRec {
      margin-top: vw(0);

      div:nth-child(3) {
        p {
          span:nth-child(2) {
            margin-left: vw(45);
          }
        }
      }

      div {
        margin-top: vw(5);
        display: flex;

        img {
          margin-left: vw(10);
          margin-top: vw(20);
          width: vw(50);
          height: vw(50);
        }

        p {
          flex: 1;
          font-size: vw(10);
          transform: scale(0.8);
          color: #999999;
          line-height: vw(28);

          span:first-child {
            font-size: vw(16);
            color: #333;
            line-height: vw(28);
          }

          span:nth-child(2) {
            margin-left: vw(30);
            font-size: vw(16);
            color: #999999;
            line-height: vw(28);
          }
        }
      }
    }
  }

  .health {
    margin-top: vw(10);
    padding: vw(10) vw(10) 0 vw(10);
    height: vw(430);
    background: #fff;
    text-align: left;

    .healthTitle {
      display: flex;
      justify-content: space-between;

      span {
        font-size: vw(12);
        color: #999;
        transform: scale(0.9);
      }
    }

    .healthContent {
      margin-top: vw(20);

      div {
        margin-top: vw(20);
        display: flex;

        img {
          width: vw(120);
          height: vw(68);
        }

        span {
          margin-left: vw(10);
        }
      }
    }
  }
}

.more {
  font-family: "MicrosoftYaHei", "微软雅黑";
  font-weight: 400;
  font-style: normal;
  font-size: vw(15) !important;
  color: #999999;
}
</style>
